<template>
  <div class="about">
  <h1>name{{Myname}}</h1>
  <button @click="changeName">改变我的名字</button>
  
  </div>
</template>

<script lang="ts">
 import {defineComponent} from "vue"
export default defineComponent({
  name :"About",
 
});


</script>
<script lang="ts" setup>
import {ref, computed}from 'vue';
let firstName = ref("李");
let lastName = ref("四");


let Myname = computed({
    get() {
    return firstName.value + " " + lastName.value;
  },
  set(value) {
    console.log(value);
    firstName.value = value.split(" ")[0];
    lastName.value = value.split(" ")[1];
  },
})




const changeName = () => {
  Myname.value = "张 三";
};
</script>